import React from 'react';
import { Card, Typography, Table, Tag, Progress } from 'antd';
import { FireOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const KaipanlaThemes: React.FC = () => {
  const cardStyle = {
    backgroundColor: '#112240',
    borderColor: '#233554',
    marginBottom: '20px',
  };
  
  const cardHeadStyle = {
    backgroundColor: '#112240',
    borderBottomColor: '#233554',
  };
  
  const cardBodyStyle = {
    backgroundColor: '#112240',
  };

  // 开盘啦题材数据
  const themeData = [
    {
      key: '1',
      theme: '国产大模型',
      hotLevel: 95,
      relatedStocks: ['科大讯飞', '海天瑞声', '拓尔思', '中科曙光'],
      recentNews: '国家发改委发布AI基础设施建设指导意见，加速大模型产业化',
    },
    {
      key: '2',
      theme: '光刻胶',
      hotLevel: 88,
      relatedStocks: ['上海新阳', '晶瑞电材', '南大光电', '容大感光'],
      recentNews: '国产光刻胶取得突破性进展，多家企业产品进入验证阶段',
    },
    {
      key: '3',
      theme: '卫星互联网',
      hotLevel: 82,
      relatedStocks: ['中国卫通', '航天宏图', '振芯科技', '华力创通'],
      recentNews: '我国首个低轨卫星互联网星座计划获批，预计年内发射首批卫星',
    },
    {
      key: '4',
      theme: '钠离子电池',
      hotLevel: 78,
      relatedStocks: ['宁德时代', '中科电气', '杉杉股份', '当升科技'],
      recentNews: '宁德时代钠离子电池即将量产，能量密度大幅提升',
    },
    {
      key: '5',
      theme: '国产医疗器械',
      hotLevel: 75,
      relatedStocks: ['迈瑞医疗', '万东医疗', '开立医疗', '鱼跃医疗'],
      recentNews: '医保集采扩围，国产医疗器械替代加速',
    },
  ];

  const columns = [
    {
      title: '题材名称',
      dataIndex: 'theme',
      key: 'theme',
      render: (text: string) => (
        <span style={{ color: '#64ffda', fontWeight: 'bold' }}>
          {text} {themeData.find(item => item.theme === text)?.hotLevel > 90 && 
            <FireOutlined style={{ color: '#ff4d4f', marginLeft: 5 }} />
          }
        </span>
      ),
    },
    {
      title: '热度',
      dataIndex: 'hotLevel',
      key: 'hotLevel',
      render: (hotLevel: number) => (
        <Progress 
          percent={hotLevel} 
          size="small" 
          strokeColor={hotLevel > 90 ? '#ff4d4f' : hotLevel > 80 ? '#ff7a45' : '#64ffda'} 
          trailColor="#233554"
          format={percent => `${percent}%`}
        />
      ),
    },
    {
      title: '相关股票',
      dataIndex: 'relatedStocks',
      key: 'relatedStocks',
      render: (stocks: string[]) => (
        <span>
          {stocks.map(stock => (
            <Tag color="#233554" key={stock} style={{ margin: '2px' }}>
              {stock}
            </Tag>
          ))}
        </span>
      ),
    },
    {
      title: '最新消息',
      dataIndex: 'recentNews',
      key: 'recentNews',
      render: (text: string) => <span style={{ color: '#8892b0' }}>{text}</span>,
    },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Card 
        title="开盘啦题材" 
        style={cardStyle}
        headStyle={cardHeadStyle}
        bodyStyle={cardBodyStyle}
      >
        <Typography style={{ color: '#ccd6f6', marginBottom: '20px' }}>
          <Paragraph>
            开盘啦题材是市场热点的重要来源，通过对题材的跟踪和分析，可以把握市场情绪和资金流向。
            以下是当前市场热门题材及相关个股。
          </Paragraph>
        </Typography>
        
        <Table 
          dataSource={themeData} 
          columns={columns} 
          pagination={false}
          style={{ 
            backgroundColor: '#112240',
            color: '#ccd6f6'
          }}
        />
      </Card>
    </div>
  );
};

export default KaipanlaThemes;